<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3翻书效果</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            body,html {
                height: 100%;
            }
            li{
                list-style: none;
            }
            body {
                -webkit-perspective: 2000px;
                -moz-perspective: 2000px;
                -ms-perspective: 2000px;
                perspective: 2000px;
                background-color: #212121;
            }
            .book {
                position: absolute;
                top: 30%;
                left: 40%;
                width: 500px;
                height: 500px;
                background-color: #fff;
                -webkit-transform: rotateX(30deg);
                -ms-transform: rotateX(30deg);
                -o-transform: rotateX(30deg);
                transform: rotateX(30deg);
               
            }
            /*开3D效果*/
            .pre-3d {               
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 500px;
                height: 500px;
                border: 1px solid #1976D2;
                /* text-align: center; */
                -webkit-transform-origin: 0 50%;
                -moz-transform-origin: 0 50%;
                -ms-transform-origin: 0 50%;
                -o-transform-origin: 0 50%;
                transform-origin: 0 50%;
            }
            .front1 {
                background-color: paleturquoise;
                height: 100%;
            }
            .front2 {
                width:100%;
                height:100%;
                padding:4vw;
                background-color: red;
                padding-top:3vw;
            }   
            
            div.text{
                font-size: 2.5vw;
                line-height: 4vw;
                text-align: left;
                margin: 2vw;
            }

            div.picture{
                width:100%;
                height:55%;
            }

            img{
                width: 450px;
                height: 300px;
                margin-top: 2.5vw;
                margin: 2vw;
                        
           
            }
           
        </style>
    </head>
    <body>
        <div class="book pre-3d" id="book">
            <!-- 后封面 -->
            <ul>
            <li class="pre-3d  page front2" id="Rcover">后封面<img src="img/22.jpg" alt=""></li>
            <!-- 书页 -->
            <!-- <li class="pre-3d  page front2"> -->
                <!-- <div>
                    我们的故事从哪里开始说起好呢？我想不起我们是怎么认识的了。
                    你是个不会主动的人，而我恰好也是，你说想要一个人的座位，我说我也是！
                    <img src="img/33.jpg" alt="">
                </div>
                 -->
                 第二页
                

                
            <!-- </li> -->
            <li class="pre-3d  page front2">
                第二页
                <img src="img/33.jpg" alt="">
            </li>
            <li class="pre-3d  page front2">
                <div>
                    <!-- 第一页 -->
                    <div class="text">
                        <p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            我们的故事从哪里开始说起好呢？我想不起我们是怎么认识的了。你是个不会主动的人，而我恰好也是，你说想要一个人的座位，我说我也是！
                        </p>
                       
                    </div>
                    <div class="picture">
                         <img src="img/22.jpg" alt="">
                    </div>
                   
                </div>
            </li>
            <!-- <li class="pre-3d  page front2">ddfdf<img src="img/4.jpg" alt=""></li>
            
            <li class="pre-3d  page front2">sddd<img src="img/2.jpg" alt=""></li> -->
            <!-- 书的封面 -->
            <!-- <li class="pre-3d  page front1">封面<img src="img/44.jpg" alt=""></li> 有问题 -->
            </ul>
        </div>
   </body>
<script>
    var b=document.getElementById('book');
    var s=document.getElementsByTagName('li');
    var c=document.getElementById('Rcover');
    var i=2;

    b.onclick=function(){
        console.log("i:",i)
        if(i>0){
            s[i].style.transform='rotateY(-150deg)';
            s[i].style.transition='3s';   
            // s[i].style.backfaceVisibility='hidden';
            
            
            i--;
            
        }
        
    }
    c.onclick = function (e) {
        //阻止事件穿透
        e.stopPropagation();
        // j比i大1
        //这里循环不写死6，并且从0开始循环，不是1
        //之前就是这里报错了，下标越界
        for (var j = 0; j < s.length; j++) {
            s[j].style.transform = 'rotateY(0deg)';
            s[j].style.transition = '3s';
           
        }
        i = 2;
        console.log("i:", i)
    }
</script>
</html>